<template>
	<alert :show="show">
		<view class="alert-content">
			<view class="alert__title">{{ title }}</view>
			<view class="input-wrapper">
				<input class="input" type="number" :placeholder="placeholder" v-model="value" :maxlength="maxlength">
			</view>
			<view class="operation-btn-wrapper">
				<view class="operation-btn operation-btn--cancel" @click="onCancel" hover-class="hover">取消</view>
				<view v-if="0 == value.length||disabled" class="operation-btn operation-btn--confirm operation-btn--disabled">确定
				</view>
				<view v-else class="operation-btn operation-btn--confirm" @click="onConfirm" hover-class="hover">确定</view>
			</view>
		</view>
	</alert>
</template>

<script>
	import alert from '../alert/index.vue';
	export default {
		name: "input-alert",
		components: {
			alert
		},
		props: {
			show: Boolean,
			title: String,
			placeholder: String,
			maxlength: {
				type: Number,
				default: 6
			},
			target: String, // 弹窗后要做的事情，组件不做处理，会在 success 回调中返回
			params: Object, // 传参，组件不做处理，会在 success 回调中返回
		},
		data() {
			return {
				value: '',
				disabled: false,
				times: null
			};
		},
		destroyed() {
			clearTimeout(this.times)
		},
		methods: {
			over(){
				this.disabled=false
			},
			onCancel: function() {
				this.$emit('cancel');
			},
			onConfirm: function() {
				// this.disabled=true
				if(this.times){
					clearTimeout(this.times)
				}
				this.times=setTimeout(()=>{
					this.$emit('confirm', this.value, this.target, this.params);
				},500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.alert-content {
		background: #FFFFFF;
		border-radius: 25rpx;
		padding: 60rpx 0 0;
		text-align: center;
	}

	.alert__title {
		font-size: 30rpx;
		font-weight: bold;
		color: $uni-text-color;
	}

	.operation-btn-wrapper {
		border-top: 1px solid #e5e5e5;
		overflow: hidden;
		position: relative;
	}

	.operation-btn-wrapper:after {
		content: "";
		width: 1px;
		height: 100%;
		background: #e5e5e5;
		position: absolute;
		top: 0;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.operation-btn {
		float: left;
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
	}

	.operation-btn--disabled {
		opacity: 0.5;
	}

	.operation-btn--confirm {
		color: $uni-text-color-main;
	}

	.input-wrapper {
		padding: 40rpx;
	}

	.input {
		height: 60rpx;
		border: 1px solid #e5e5e5;
		font-size: 30rpx;
	}
	.hover {
		opacity: 0.5;
	}
</style>
